{extend name="app/shop/view/base.html" /}

{block name="resources"}
<style>
	.package-wrap{margin-top:50px;display:flex;}
	.package-wrap .wrap{flex:1;border:1px solid #f1f1f1}
	.package-wrap .wrap:nth-child(2){margin-left:30px}
	.package-wrap .wrap .ns-card-common{margin-top:0}
	.package-wrap .wrap .layui-card-header{padding:5px 20px}
	.weapp-info{text-align:center}
	.weapp-info .qrcode{width:130px;height:130px;margin:30px auto}
	.weapp-info dl{display:flex;line-height:30px}
	.weapp-info dl dd,.weapp-info dl dt{flex:1}
	.weapp-info dl dt{width:100px;text-align:right;color:#999}
	.weapp-info dl dd{text-align:left;padding-left:30px}
	.wrap .step-wrap .layui-timeline{padding-left:80px!important}
	.wrap .step-wrap .layui-timeline-title{font-size:14px;margin-bottom:5px}
	.step-wrap .layui-timeline-content p{font-size:13px}
	.step-wrap .layui-timeline-item:before{left:4px;background-color:unset;border-left:1px dashed #ccc}
	.edition-wrap{margin-top:20px}
	.edition-wrap .header{font-size:14px}
	.edition-list .edition-item{display:inline-block;width:auto;border:1px solid #ddd;padding:8px 30px;line-height:1;margin:15px 15px 0 0;border-radius:5px;cursor:pointer;text-align: center;}
	.edition-list .edition-item .name{color:#333}
	.edition-list .edition-item.active,.edition-list .edition-item:hover{border-color:#ff8143}
	.edition-list .edition-item.active .name,.edition-list .edition-item:hover .name{color:#ff8143}
	.edition-list .edition-item .version{margin-top:8px;font-size:12px;color:#999}
	.operation{margin-top:20px;display:flex}
	.operation .layui-btn{flex:1}
	.loading-layer .loading-img{margin:10px auto;display:block}
	.preview-layer .qrcode{width:100px;height:100px;margin:10px auto;display:block}
</style>
{/block}
{block name="main"}
<div class="layui-collapse ns-tips">
	<div class="layui-colla-item">
		<h2 class="layui-colla-title">操作提示</h2>
		<ul class="layui-colla-content layui-show">
			<li>已购买的小程序会出现在下方,购买可前往<a href="https://www.niushop.com" target="_blank">Niushop官网</a>进行购买</li>
			<li>下载之后需使用HBuilderX编译成微信小程序,然后进行发布,HBuilderX下载地址: <a href="https://www.dcloud.io/hbuilderx.html" target="_blank">https://www.dcloud.io/hbuilderx.html</a></li>
		</ul>
	</div>
</div>

<div class="package-wrap">
	<div class="wrap">
		<div class="layui-card ns-card-common ns-card-brief">
			<div class="layui-card-header">
				<span class="ns-card-title">小程序信息</span>
			</div>
			<div class="layui-card-body layui-field-box weapp-info">
				<img src="{:img($config.qrcode_url)}" class="qrcode">
				<dl>
					<dt>小程序名称</dt>
					<dd>{$config.nick_name}</dd>
				</dl>
				<dl>
					<dt>小程序ID</dt>
					<dd>{$config.authorizer_appid}</dd>
				</dl>
				<dl>
					<dt>小程序原始ID</dt>
					<dd>{$config.user_name}</dd>
				</dl>
			</div>
		</div>
	</div>
	<div class="wrap">
		<div class="layui-card ns-card-common ns-card-brief">
			<div class="layui-card-header">
				<span class="ns-card-title">小程序发布</span>
			</div>
			<div class="layui-card-body layui-field-box">
				<div class="step-wrap">
					<ul class="layui-timeline">
					    <li class="layui-timeline-item">
					        <i class="layui-icon layui-timeline-axis ns-text-color">&#xe63f;</i>
					        <div class="layui-timeline-content layui-text">
					            <h3 class="layui-timeline-title">选择版本</h3>
					            <p>选择所需版本上传源码到小程序版本库</p>
					        </div>
					    </li>
					    <li class="layui-timeline-item">
					        <i class="layui-icon layui-timeline-axis ns-text-color">&#xe63f;</i>
					        <div class="layui-timeline-content layui-text">
					            <h3 class="layui-timeline-title">提交审核版本</h3>
					            <p>上传成功，登陆小程序平台选择版本提交审核</p>
					        </div>
					    </li>
					    <li class="layui-timeline-item">
					        <i class="layui-icon layui-timeline-axis ns-text-color">&#xe63f;</i>
					        <div class="layui-timeline-content layui-text">
					            <h3 class="layui-timeline-title">发布小程序</h3>
					            <p>审核通过，发布小程序</p>
					        </div>
					    </li>
					</ul>
				</div>

				<div class="edition-wrap">
					<div class="header">选择版本</div>
					{notempty name="template_list"}
						<div class="edition-list">
							<div class="edition-item active" data-mark="{$template_list[0]['template_id']}" data-version="{$template_list[0]['user_version']}">
								<div class="name">{$template_list[0]['user_desc']}</div>
								<div class="version">{$template_list[0]['user_version']}</div>
							</div>
						</div>
						<div class="operation">
							<button class="layui-btn layui-btn-primary" onclick="preview()">获取体验版二维码</button>
							<button class="layui-btn ns-bg-color" onclick="upload()">小程序上传</button>
						</div>
					{/notempty}
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/html" id="loading">
	<div class="loading-layer">
		<img src="WEAPP_IMG/loading.gif" class="loading-img">
		<p>正在生成体验小程序，请耐心等待</p>
	</div>
</script>

<script type="text/html" id="upload">
	<div class="loading-layer">
		<img src="WEAPP_IMG/loading.gif" class="loading-img">
		<p>正在上传小程序，请耐心等待</p>
	</div>
</script>

<script type="text/html" id="preview">
	<div class="preview-layer">
		<img src="{{ ns.img(d.pic_path) }}" class="qrcode">
		<p>请用手机微信扫描二维码进行体验</p>
	</div>
</script>
{/block}

{block name="script"}
<script type="text/javascript">
var laytpl,
	previewClick = false,
	uploadClick = false;

layui.use('laytpl', function(){
  	laytpl = layui.laytpl;
});

// 预览
function preview(){
	layer.open({
	  	type: 1,
	  	title: false,
	  	skin: 'weapp-preview',
	  	closeBtn: 1, //不显示关闭按钮
	  	anim: 0,
	  	shadeClose: false,
	  	content: $('#loading').html()
	});

	if (previewClick) return;
	previewClick = true;

	$.ajax({
        type: "post",
        url: "{:addon_url('wxoplatform://shop/weapp/getQrcode')}",
        dataType: "JSON",
        success: function (res) {
        	previewClick = false;
        	if (res.code < 0) {
        		layer.closeAll();
        		layer.msg(res.message);
        	} else {
        		laytpl($('#preview').html()).render(res.data, function(string){
			  		$('.weapp-preview .layui-layer-content').html(string)
			  	});
        	}
        }
    });
}

// 上传
function upload(){
	var mark = $('.edition-list .active').attr('data-mark'),
		version = $('.edition-list .active').attr('data-version');
	if (mark == undefined || mark.length == 0) return;
	
	layer.open({
	  	type: 1,
	  	title: false,
	  	closeBtn: 0, //不显示关闭按钮
	  	anim: 0,
	  	shadeClose: false,
	  	content: $('#upload').html()
	});

	if (uploadClick) return;
	uploadClick = true;

	$.ajax({
        type: "post",
        url: "{:addon_url('wxoplatform://shop/weapp/commit')}",
        dataType: "JSON",
        data: {
			template_id: mark,
			version: version
        },
        success: function (res) {
        	layer.closeAll();
    		layer.msg(res.message);
    		if (res.code >= 0) {
				setTimeout(function(){
					location.href = "{:addon_url('wxoplatform://shop/weapp/record')}";
				})
    		} else {
	        	uploadClick = false;
    		}
        }
    });
}
</script>
{/block}